<template>
  <div class="about">
    <h1>播放状态: {{ $store.state.isPlayed }}</h1>
    <button @click="playOrStop(true)">播放</button>
    <button @click="pause($store.state.isPlayed)" :disabled="stop">暂停</button>
    <button @click="playOrStop(false, 'stop')">停止</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        stop: {
          type: Boolean,
          default: false
        }
      }
    },
    methods: {
      /**
       *  点击播放按钮, 执行定义的 mutation
       */
      // play() {
      //   this.$store.commit('markVideoPlayed')
      // },

      playOrStop(status, flag) {
        this.stop = 'stop' === flag;

        this.$store.commit('markVideoPlayed', status);
      },

      pause(status) {
        this.$store.commit('markVideoPlayed', !status);
      }

    },
    mounted () {
      // 页面挂载时执行action
      this.$store.dispatch('loadPlayedStatus')
    }
  }

</script>
